/**
 * 粒子效果系统
 * 包括鼠标光标粒子拖尾和交互效果
 */
class ParticleSystem {
    constructor() {
        this.cursorParticles = [];
        this.maxParticles = 50;
        this.container = document.getElementById('cursor-particles');
        this.hologramContainer = document.getElementById('hologram-ripple');
        this.mouseX = 0;
        this.mouseY = 0;
        this.isActive = true;
        this.accentColor = getComputedStyle(document.documentElement).getPropertyValue('--accent-color').trim();
        
        this.init();
    }
    
    init() {
        // 监听鼠标移动
        document.addEventListener('mousemove', (e) => {
            this.mouseX = e.clientX;
            this.mouseY = e.clientY;
            
            // 创建新粒子
            if (this.isActive) {
                this.createParticle();
            }
        });
        
        // 监听点击事件，创建二进制数字效果
        document.addEventListener('click', (e) => {
            if (this.isActive) {
                this.createBinaryDigits(e.clientX, e.clientY);
            }
        });
        
        // 监听元素悬停，创建波纹效果
        document.querySelectorAll('button, .main-nav li, .tag, .project-card, .btn').forEach(element => {
            element.addEventListener('mouseenter', (e) => {
                if (this.isActive) {
                    this.createRippleEffect(e);
                }
            });
        });
        
        // 监听强调色变化
        document.querySelectorAll('.color-option').forEach(option => {
            option.addEventListener('click', (e) => {
                this.accentColor = e.target.dataset.color;
            });
        });
        
        // 开始动画循环
        this.animate();
    }
    
    createParticle() {
        // 限制粒子数量
        if (this.cursorParticles.length >= this.maxParticles) {
            // 移除最早创建的粒子
            const oldParticle = this.cursorParticles.shift();
            if (oldParticle.element && oldParticle.element.parentNode) {
                oldParticle.element.parentNode.removeChild(oldParticle.element);
            }
        }
        
        // 创建新的粒子元素
        const particle = document.createElement('div');
        particle.className = 'cursor-particle';
        particle.style.left = `${this.mouseX}px`;
        particle.style.top = `${this.mouseY}px`;
        particle.style.backgroundColor = this.accentColor;
        
        // 随机大小和透明度
        const size = Math.random() * 4 + 1;
        const opacity = Math.random() * 0.5 + 0.3;
        
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.opacity = opacity;
        
        // 添加到容器
        this.container.appendChild(particle);
        
        // 存储粒子信息
        this.cursorParticles.push({
            element: particle,
            x: this.mouseX,
            y: this.mouseY,
            size: size,
            opacity: opacity,
            speed: Math.random() * 2 + 1,
            life: 100, // 粒子生命周期
            direction: Math.random() * Math.PI * 2 // 随机方向
        });
    }
    
    createBinaryDigits(x, y) {
        // 创建20个二进制数字
        for (let i = 0; i < 20; i++) {
            const digit = document.createElement('div');
            digit.className = 'binary-digit';
            digit.textContent = Math.random() > 0.5 ? '1' : '0';
            
            // 随机位置（在点击位置周围）
            const offsetX = (Math.random() - 0.5) * 100;
            const offsetY = (Math.random() - 0.5) * 100;
            
            digit.style.left = `${x + offsetX}px`;
            digit.style.top = `${y + offsetY}px`;
            digit.style.color = this.accentColor;
            
            this.hologramContainer.appendChild(digit);
            
            // 动画结束后移除元素
            setTimeout(() => {
                if (digit.parentNode) {
                    digit.parentNode.removeChild(digit);
                }
            }, 1500);
        }
    }
    
    createRippleEffect(e) {
        const element = e.currentTarget;
        const rect = element.getBoundingClientRect();
        
        const ripple = document.createElement('div');
        ripple.className = 'ripple-effect';
        
        // 计算相对于元素的位置
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        ripple.style.left = `${x}px`;
        ripple.style.top = `${y}px`;
        
        // 添加到元素中
        element.style.position = 'relative';
        element.style.overflow = 'hidden';
        element.appendChild(ripple);
        
        // 动画结束后移除
        setTimeout(() => {
            if (ripple.parentNode) {
                ripple.parentNode.removeChild(ripple);
            }
        }, 600);
    }
    
    animate() {
        // 更新所有粒子
        for (let i = 0; i < this.cursorParticles.length; i++) {
            const particle = this.cursorParticles[i];
            
            // 减少生命值
            particle.life -= 1;
            
            // 如果生命结束，移除粒子
            if (particle.life <= 0) {
                if (particle.element && particle.element.parentNode) {
                    particle.element.parentNode.removeChild(particle.element);
                }
                this.cursorParticles.splice(i, 1);
                i--;
                continue;
            }
            
            // 更新位置（随机漂浮）
            particle.x += Math.cos(particle.direction) * particle.speed * 0.2;
            particle.y += Math.sin(particle.direction) * particle.speed * 0.2;
            
            // 更新透明度（逐渐消失）
            const newOpacity = particle.opacity * (particle.life / 100);
            
            // 更新DOM元素
            particle.element.style.left = `${particle.x}px`;
            particle.element.style.top = `${particle.y}px`;
            particle.element.style.opacity = newOpacity;
        }
        
        // 继续动画循环
        requestAnimationFrame(() => this.animate());
    }
    
    // 设置粒子系统是否激活
    setActive(active) {
        this.isActive = active;
    }
    
    // 清除所有粒子
    clearParticles() {
        this.cursorParticles.forEach(particle => {
            if (particle.element && particle.element.parentNode) {
                particle.element.parentNode.removeChild(particle.element);
            }
        });
        this.cursorParticles = [];
    }
}

// 当DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    const particleSystem = new ParticleSystem();
    
    // 将实例暴露给全局，以便其他脚本可以访问
    window.particleSystem = particleSystem;
});